import * as React from 'react';
import { useAppSelector, useAppDispatch } from '@/app/hooks';
import { updatePassenger, selectPassengers } from '@/pages/order/indexSlice';

import './index.module.scss';
const { memo } = React;
interface SeatProps {
  seatType: string;
}
function Seat(props: SeatProps) {
  const { seatType } = props;
  const passengers = useAppSelector(selectPassengers);
  const dispatch = useAppDispatch();
  return (
    <div>
      {passengers.map((passenger) => {
        return (
          <p
            key={passenger.id}
            styleName={passenger.seat === seatType ? 'seat active' : 'seat'}
            data-text={seatType}
            onClick={() =>
              dispatch(
                updatePassenger({
                  id: passenger.id,
                  data: {
                    seat: seatType,
                  },
                })
              )
            }
          >
            &#xe02d;
          </p>
        );
      })}
    </div>
  );
}
export default memo(Seat);
